<template>
  <div class="main">
        <!-- <h2>爆款产品</h2> -->
        <div class="main_box">
          <ul class="mui-table-view">
            <router-link class="tuijian" to="/classify">
            <img src="../../../../static/img/groom_jrtj.png" width="100%">
            </router-link>
            <router-link class="remai" to="/classify">
            <img src="../../../../static/img/groom_rmsp.png" width="100%">
            </router-link>
            <div class="clear"></div>
            <li  class="mui-table-view-cell mui-media" v-for="(todo) in todos" :key="todo.index" >
                <div class="list">    
                    <div class="imgt" @click="open(todo.g_num_iid,todo.g_title,todo.g_zhuansheng,todo.g_img_thumb)">
                        <div class="image">
                        <img v-lazy="todo.g_img_thumb" class="sb_pic fl">
                    </div> 
                    <h5>{{todo.g_title}}</h5> </div>                
                    <div class="sb_r fl"  @click="open(todo.g_num_iid,todo.g_title,todo.g_zhuansheng,todo.g_img_thumb)">  
                         
                        <div class="sb_b">   
                            <div class="fl">
                                <p class='mui-ellipsis'>        
                                    <span class="price">￥{{todo.g_quanhou/100}}</span>     
                                    <span class="price_under">￥{{todo.g_min_group_price/100}}</span>
                                </p>   
                            <div class="quan">
                                <img class="quan_pic fl" src="/static/img/bg_ticket.png">
                                <span class="quan_price">￥{{todo.g_coupon_discount/100}}</span>
                            </div>
                            <p>已拼{{todo.g_sold}}单</p>
                            </div>
                                  
                        </div>   
                    </div>   
                    <div class="sh">
                        <div @click="goshare()" class="share  fr">
                                <img class="share_pic" src="/static/img/share.png">
                                <p>分享赚￥{{todo.g_zhuansheng}}</p>
                            </div>  
                    </div> 
                </div>   
              <div class="clear"></div>            
            </li>
          </ul>
        </div>
      </div>
</template>

<script>
import { Toast } from "mint-ui";
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  name: "HomeContainer",
  props: {
    todos: Array
  },
  methods: {
    goshare:function(){
        alert("1")
    },
    open: function(id,title,num,img) {
      this.$router.push({ path: "goodDetail", query: {  num_iid: id,
               title:title,
               num:num,
               img:img } });
    }
  }
};
</script>

<style lang="stylus" scoped>
.clear{
  clear: both;
}
.tuijian{
  float: left;
  width :50%;
//   margin .2rem 0
}
.remai{
  float: left;
  width :50%;
}
p{
  font-size .3rem;
  color :#000;
}
.fl{
  float: left;
}
.fr{
  float: right;
}
.main_box li{
  margin-top: 5px;
  overflow hidden;
}
.lunbo{
    position: relative;
}
.search{
    position: absolute;
    top: 0;
    z-index: 4;
    width: 80%;
    border-radius: 5px;
}
.mui-table-view {
		li {
			h1 {
				font-size: 14px;
			}
			.mui-ellipsis {
				font-size: 12px;
				color: #226aff;
				display: flex;
				justify-content: space-between;
			}
		}
	}
.sb_r{
    margin-right: .2rem;
    width 40%;
}
.share{
    width 27%
    margin-top .15rem
    text-align center
    border-left 1px solid rgba(0,0,0,0.05)
}
.share_pic{
width 1rem
height 1rem
margin-bottom .2rem
}
.quan_pic{
    width: 1.8rem;
    height: .8rem;
    margin-right: 10px;
    margin-bottom: 5px;
}
.sb_pic{
    width: 25%
    height 25%
    margin-right: .2rem;
}
span{
    font-size: .3rem;
    color: #000;
}
.quan{
    position: relative;
    margin-top: .18rem;
}
.quan_price{
    position: absolute;
    top: .2rem;
    z-index: 0;
    left: .9rem;
}
.price_under{
    text-decoration: line-through;
    color: #999;
    font-size: .2rem;
}
h5{
width :6.8rem;
overflow: hidden;
text-overflow :ellipsis;
white-space: nowrap;
    font-size: .32rem;
    color: #000;
}
.main h2 {
display: block;
height: 1.3rem;
background: white;
font-size: 0.35rem;
line-height: 1.3rem;
padding-left: 0.3rem;
}

.mint-swipe {
    
        height: 200px;
    
        .mint-swipe-item {
    
            &:nth-child(1) {
    
                background-color: red;
    
            }
    
            &:nth-child(2) {
    
                background-color: blue;
    
            }
    
            &:nth-child(3) {
    
                background-color: cyan;
    
            }
    
            img {
    
                width: 100%;
    
                height: 100%;
    
            }
    
        }
    
    }
    
    
    
    .mui-grid-view.mui-grid-9 {
    
        background-color: #fff;
    
        border: none;
    
        margin-top: 22px;
    
        img {
    
            width: 50px;
    
            height: 50px;
    
        }
    
        .mui-media-body {
    
            font-size: 13px;
    
        }
    
    }
    
    
    
    .mui-grid-view.mui-grid-9 .mui-table-view-cell {
    
        border: 0;
    
    }
</style>